import { Tabs } from "antd";

import { useAliveController } from 'react-activation'

import { $ } from "@components/util";

import styles from "../styles/main-frame.module.css";
const tabs_class = $(styles, "irs-main-tabs");

const FCInternalTabBar = ({
  openedPages,
  activeTabKey,
  onTabItemClick,
  onTabItemRemove,
}) => {

  const { dropScope } = useAliveController()

  const items = openedPages?.map((page, index) => {
    return {
      label: page.title,
      key: page.key,
      closable: index ? true : false,
    };
  });

  const handleTabItemEdit = (key, action) => {
    if (action === "remove") {
      onTabItemRemove(key);
      dropScope(key)
    }
  };

  return (
    <>
      <Tabs
        type="editable-card"
        hideAdd
        className={tabs_class}
        items={items}
        activeKey={activeTabKey}
        onChange={onTabItemClick}
        onEdit={handleTabItemEdit}
      >
      </Tabs>
    </>
  );
};

export default FCInternalTabBar;
